<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏式布局</title>
	<style>
	/*清除浮动*/
	.clearfix:after { content:"."; display:block; height:0;visibility:hidden; clear:both; }
	.clearfix { zoom:1; }
	.clearit { clear:both; height:0; font-size:0;overflow:hidden;}

	body{
		font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
		color:#666;
	}
	.box{
		padding:20px;
		margin:20px;
		border:1px solid #999;
		background-color:#eee;
	}
	.left,.center,.right{
		background-color: #fff;
	}
	div{
		box-sizing: border-box;
	}
	.left{
		width:200px;
		padding:20px;
		border:1px solid #999;
		float:left;
	}
	.left .left-logo{
		float:left;
		width:80px;
		height:80px;
		text-align:center;
		line-height:80px;
		border:1px solid #ccc;
		background-color:blue;
		font-size:12px;
		color:#fff;
	}
	.left .left-text{
		float:right;
		font-size:14px;
	}
	.center{
		border:1px solid #999;
		margin:0 20px;
		padding:20px;
		position:absolute;
		top:40px;
		left:240px;
		right:160px;
	}
	.center h4{
		font:16px/40px "Arial";
	}
	.center span{
		font:16px/18px "Arial";
	}
	.right{
		width:120px;
		border:1px solid #999;
		padding:20px;
		float:right;
	}
	.right .right-box{
		margin-bottom:20px;
		background-color: purple;
		color:#fff;
		font-size:14px;
		line-height:80px;
		width:80px;
		height:80px;
		text-align:center;
	}
	.right .right-box:last-child{
		margin-bottom:0;
	}
	</style>
	<!-- <script>
	$(function(){
		var W=$(window).width()-520;
		$('.center').css({
			width: W,
			property2: 'value2'
		});
	})
	</script> -->
</head>
<body>
	<div class="box clearfix">
		<div class="left">
			<div class="left-logo">团队LOGO</div>
			<div class="left-text">进击的前端</div>
		</div>
		<div class="center">
			<h4>这个是标题主题。。。。。</h4>
			<span>这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分数这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分数这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分安徽省收到后发货的分数数</span>
			<h4>这个是标题下面一个。。。。。</h4>
			<span>下面下面下面这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分数这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分数这里面书一i是内容页面  ， 暗示的健康规范规范付款发顺丰还是返回时发生的发生的符合双方还加上可好安徽省收到后发货的分安徽省收到后发货的分数数</span>
		</div>
		<div class="right">
			<div class="right-box">个人LOGO</div>
			<div class="right-box">个人LOGO</div>
			<div class="right-box">个人LOGO</div>
			<div class="right-box">个人LOGO</div>
		</div>
	</div>
</body>
</html>